<template>
  <div class="top">
    <div class="denglu">
      <p>登录</p>
    </div>

    <div class="box">
      <van-form @submit="onSubmit">
        <van-field v-model="username" name="用户名" placeholder="用户名" />
        <van-field
          v-model="password"
          type="password"
          name="密码"
          placeholder="密码"
        />
        <div class="tip" style="margin: 16px">
          <van-checkbox v-model="checked" icon-size="15px"
            >我已阅读并同意</van-checkbox
          >
        </div>

        <div style="margin: 16px">
          <van-button round block type="info" native-type="submit"
            >登录</van-button
          >
        </div>
      </van-form>

      <div class="footer" style="margin: 16px">
        <router-link to="register"> 新用户注册</router-link>
        <span>手机号登录</span>
      </div>
    </div>
  </div>
</template>
<script>
import Vue from "vue";
import { Toast } from "vant";
Vue.use(Toast);
export default {
  name: "login",
  data() {
    return {
      username: "",
      password: "",
      checked: "",
    };
  },
  mounted() {
    console.log(this.$route);
    this.username = this.$route.query.data.user_name;
    this.password = this.$route.query.data.user_pwd;
  },
  methods: {
    onSubmit(values) {
      console.log("submit", values);
      const data1 = values;
      this.axios({
        method: "post",
        url: "http://localhost:3000/login",
        data: data1,
        processData: false,
        contentType: false,
      }).then((res) => {
        console.log(res);
        const aaa = res.data.error;
        if (aaa == 1) {
          Toast("账号或密码错误！");
        } else {
          console.log("成功");
          const userId = res.data.data[0].user_id;
          const userName = res.data.data[0].user_name;
          console.log(userId);
          console.log(userName);
          // console.log(res.data.data[0].user_id)
          localStorage.setItem("userId", userId);
          localStorage.setItem("userName", userName);
          this.$router.push("index");
          // const userId=res.data.data[0].user_id
          // this.$router.push({name:"changepassword",params:{userId:userId}})
        }
      });
    },
  },
};
</script>
<style scoped>
.top {
  margin-top: 60px;
}
.denglu p {
  font-size: 24px;
  margin-left: 9%;
}
.denglu {
  width: 100%;
  /* border: 1px red solid; */
}
.box {
  padding: 0 5%;
}
.tip {
  font-size: 12px;
  color: rgb(235, 239, 243);
}
.footer {
  font-size: 12px;
  color: #1989fa;
}
a {
  list-style: none;
  float: left;
  color: #1989fa;
}
span {
  float: right;
}
.van-field {
  margin-top: 15px;
}
</style>